<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-24 14:18:52
 * 模块背景设置模块
-->
<template>
  <div>
    <SetRadioValueAttr title="模块背景" :attr="moduleBase" ckey="bgType" :list="bgList" />
    <SetSelectAttr
      v-if="moduleBase.bgType == 3"
      title="背景类型"
      :attr="moduleBase"
      ckey="bgStyle"
      :list="bgTyprList"
    />
    <SetColorAttr v-if="moduleBase.bgStyle == 1 && moduleBase.bgType != 2" title="背景颜色" :attr="moduleBase" ckey="bgColor" />
    <SetImgAttr v-if="moduleBase.bgStyle == 2" :moduleData="moduleBase" isBgImg :size="bgSize" />
    <!-- 模块间隔开关 -->
    <SetSwitchAttr
      v-if="moduleBase.marginTop !== undefined"
      :attr="moduleBase"
      ckey="marginTop"
      title="模块间隔"
    />
    <!-- 设置模块圆角 -->
    <SetSizeAttr
      v-if="moduleBase.radius !== false"
      :attr="moduleBase"
      ckey="radius"
      :max="20"
      title="模块圆角"
    />
  </div>
</template>

<script>

export default {
  name: "setModuleBaseAttr",
  props: {
    moduleBase: {
      //模块基础属性
      type: Object,
      required: true,
      default: {},
    },
    defBgColor: {
      //默认的背景色
      type: String,
      default: "transparent",
    },
    bgSize: {
      //背景图的建议尺寸
      type: String,
      default: "",
    },
  },
  data() {
    return {
      bgList: [
        { name: "默认", value: 1 },
        { name: "隐藏", value: 2 },
        { name: "自定义", value: 3 }
      ],
      bgTyprList: [
        { name: "颜色填充", value: 1 },
        { name: "图片填充", value: 2 }
      ]
    };
  },
  methods: {
    // 使用默认背景
    useDefBg() {
      this.moduleBase.bgType = 1;
      this.moduleBase.bgColor = this.defBgColor;
    }
  }
};
</script>
